<script setup lang="ts">

defineOptions({
  name: 'VipLayoutComprehensive',
})

interface PropsType {
  collapse: boolean;
  fixedHeader: boolean;
  showTabs: boolean;
}

withDefaults(defineProps<PropsType>(), {
  collapse: false,
  fixedHeader: true,
  showTabs: true,
})
</script>

<template>

  <el-container class="layout-comprehensive">
    <el-header class="layout-header">
      <VipLogoVertical />
      <!--      <VipNav />-->
      <VipNavComprehensive />
    </el-header>

    <el-container class="layout-main-wrapper">
      <VipSideBar layout="comprehensive" />

      <el-main class="layout-main">
        <VipTabs v-show="showTabs" />
        <VipAppMain />
        <VipFooter />
      </el-main>

    </el-container>
  </el-container>


  <!--  <el-container class="vip-layout-comprehensive">-->
  <!--    <vip-side-bar layout="comprehensive" />-->

  <!--    <el-container class="vip-main">-->
  <!--      <el-header class="vip-layout-header">-->
  <!--        &lt;!&ndash;        <vip-nav layout="comprehensive" />&ndash;&gt;-->
  <!--        <vip-nav-comprehensive />-->
  <!--      </el-header>-->

  <!--      <vip-tabs v-show="showTabs" />-->
  <!--      <vip-app-main />-->
  <!--      <vip-footer />-->
  <!--    </el-container>-->
  <!--  </el-container>-->
</template>

<style scoped lang="scss">

.el-header {
  padding: 0 !important;
  display: flex;
  flex-direction: row;
}

.el-main {
  padding: 0 !important;
}

.layout-main-wrapper {
  overflow: hidden;

  .layout-main {
    display: flex;
    flex-direction: column;
  }
}

.vip-layout-header {
  padding: 0 !important;
  border: 0;
}
</style>
